<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row
          type="flex"
          justify="space-between"
          style="margin:10px"
        >
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="$router.push('./new')"
          >新增试题</el-button>

        </el-row>

        <!-- 表单 -->

        <el-form
          label-width="80px"
          :model="reQuestion"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="reQuestion.subjectID"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onSubjectChange"
                >
                  <el-option
                    v-for="(item, index) in subjectsList"
                    :key="index"
                    :label="item.subjectName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="reQuestion.catalogID"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(item, index) in catalogs"
                    :key="index"
                    :label="item.directoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  v-model="reQuestion.tags"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(item, index) in tagList"
                    :key="index"
                    :label="item.tagName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="reQuestion.keyword"
                  placeholder="根据题干搜索"
                  style="width:100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="reQuestion.questionType"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(v, k, i) in questionType"
                    :key="i"
                    :label="v"
                    :value="k"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  v-model="reQuestion.difficulty"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(v, k, i) in difficulty"
                    :key="i"
                    :label="v"
                    :value="k"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  v-model="reQuestion.direction"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  v-model="reQuestion.creatorID"
                  placeholder="请选择"
                  style="width:100%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(item, index) in creatorList"
                    :key="index"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  v-model="reQuestion.remarks"
                  placeholder="请选择"
                  style="width:100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  v-model="reQuestion.shortName"
                  placeholder="请选择"
                  style="width:100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  v-model="reQuestion.province"
                  placeholder="请选择"
                  style="width:50%"
                  @change="onProvinceChange"
                >
                  <el-option
                    v-for="(v, k, i) in province"
                    :key="i"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
                <!-- -------------------------城市 -->
                <el-select
                  v-model="reQuestion.city"
                  placeholder="请选择"
                  style="width:50%"
                  @change="onCatalogChange"
                >
                  <el-option
                    v-for="(v, k, i) in citys"
                    :key="i"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="text-align:right"
            >
              <el-button
                size="small"
                @click="clearAll"
              >清除</el-button>
              <el-button
                type="primary"
                size="small"
                @click="getQuestionList"
              >搜索</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 全部表格 -->
        <!-- tab标签页 -->
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
        >
          <!--  ---------------------------------- -->

          <el-tab-pane
            label="全部"
            name="all"
          >
          </el-tab-pane>

          <el-tab-pane
            label="待审核"
            name="0"
          >
          </el-tab-pane>

          <el-tab-pane
            label="已审核"
            name="1"
          >
          </el-tab-pane>
          <el-tab-pane
            label="已拒绝"
            name="2"
          >
          </el-tab-pane>
        </el-tabs>

        <!-- 消息 -->
        <el-alert
          :closable="false"
          :title="`数据一共${total}条`"
          type="info"
          show-icon
        >
        </el-alert>

        <template>

          <!-- 表格部分 -->
          <el-table
            :data="questionList"
            :header-cell-style="{background:'#fafafa'}"
            style="margin-top:15px;"
            border-bottom="5px"
          >
            <el-table-column
              label="试题编号"
              prop="number"
              width="200px"
            ></el-table-column>
            <el-table-column
              label="学科"
              prop="subject"
            ></el-table-column>
            <el-table-column
              label="目录"
              prop="catalog"
            ></el-table-column>
            <el-table-column
              label="题型"
              prop="questionType"
            >
              <template slot-scope="scope">
                {{ scope.row.questionType === '1' ? '单选' : (scope.row.questionType === '2' ?  '多选' :'简答') }}
              </template>
            </el-table-column>
            <el-table-column
              label="题干"
              prop="question"
              width="150px"
            >
              <template slot-scope="scope">
                <div class="contentClass">
                  {{scope.row.question.replace(/<[^>]+>/g, '')}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              prop="addDate"
              width="100px"
            >
              <template slot-scope="scope">
                {{scope.row.addDate | parseTimeByString}}
              </template>
            </el-table-column>
            <el-table-column
              label="难度"
              prop="difficulty"
            >
              <template slot-scope="scope">
                {{ scope.row.difficulty === '1' ? '简单' : (scope.row.difficulty === '2' ?  '一般' :'困难') }}
              </template>
            </el-table-column>
            <el-table-column
              label="录入人"
              prop="creator"
              width="100px"
            ></el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState"
              width="150px"
            >
              <template slot-scope="scope">
                {{ scope.row.chkState === 0 ? '待审核' : (scope.row.chkState === 1 ?  '已审核' :'已拒绝') }}
              </template>
            </el-table-column>
            <el-table-column
              label="审核意见"
              prop="chkRemarks"
              width="150px"
            ></el-table-column>
            <el-table-column
              label="审核人"
              prop="chkUser"
              width="100px"
            ></el-table-column>
            <el-table-column
              label="发布状态"
              prop="publishState"
            >
              <template slot-scope="scope">
                {{ scope.row.publishState === 0 ? '待发布' : (scope.row.publishState === 1 ?  '已发布' :'已下架') }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="Preview(scope.row)"
                >预览</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="checkQuestion(scope.row)"
                  :disabled="scope.row.chkState !== 0"
                >审核</el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState === 1"
                  @click="revise(scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="choicePublish(scope.row, $event)"
                >{{ scope.row.publishState === 1 ? '下架' : '上架'}}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="deleteQuestion(scope.row)"
                  :disabled="scope.row.publishState === 1"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row
            type="flex"
            justify="end"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              layout="prev, pager, next, sizes, jumper"
              :total="total"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="reQuestion.pagesize"
              :current-page="reQuestion.page"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
            >
            </el-pagination>
          </el-row>
        </template>

      </el-card>
    </div>
    <!--  审核弹窗 -->
    <check-question
      :showDialogCK="checkQuestionDialog"
      @close="checkQuestionDialog = false"
      :questionItem="questionItem"
    ></check-question>
    <!-- 预览弹窗 -->
    <previewQuestion
    :showDialog.sync="showDialogPre"
    :questionDetail.sync="questionDetail" />
  </div>
</template>

<script>
// 审核弹窗yin
import checkQuestion from '../components/questions-check.vue'
// 列表接口
import { choice, remove, detail, choicePublish } from '@/api/hmmm/questions'
// 学科列表接口
import { list as subject } from '@/api/hmmm/subjects'
// 目录接口
import { list as catalog } from '@/api/hmmm/directorys'
// 标签接口
import { list as tag } from '@/api/hmmm/tags'
// 导入 城市和省份
import { provinces, citys } from '@/api/hmmm/citys'
// 录入人
import { list as creator } from '@/api/base/users'
// 导入预览弹窗
import previewQuestion from '@/components/PreviewQuestion'
export default {
  components: {
    checkQuestion,
    previewQuestion
  },
  data () {
    return {
      questionList: [], // 题库列表数据
      questionItem: {},
      // tabs标签
      activeName: 'all',
      reQuestion: {
        page: 1, // 当前页码
        pagesize: 5,
        // query
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      total: 0, // 数据总条数
      // 审核弹框
      checkQuestionDialog: false,
      subjectsList: [], // 学科列表
      citys: [], //
      catalogs: [], // 目录列表
      tagList: [], // 标签列表
      province: provinces(), // 省份
      creatorList: [], // 录入人列表
      questionType: {
        1: '单选',
        2: '多选',
        3: '困难'
      },
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      showDialogPre: false, // 预览弹窗状态
      questionDetail: {}// 预览详情的内容

    }
  },
  created () {
    this.getQuestionList()
    // xueke
    this.getsubjectsList()
    this.getTagList()
    this.getCreator()
  },
  methods: {

    // 标签页切换
    handleClick () {
      switch (this.activeName) {
        case 'all':
          this.reQuestion.chkState = null // 全部
          this.getQuestionList()
          break
        case '0':
          this.reQuestion.chkState = 0 // 待审核
          this.getQuestionList()
          break
        case '1':
          this.reQuestion.chkState = 1 // 通过
          this.getQuestionList()
          break
        case '2':
          this.reQuestion.chkState = 2 // 拒绝
          this.getQuestionList()
          break
      }
    },
    // 获取全部题库列表
    async getQuestionList () {
      const { data } = await choice(this.reQuestion)
      this.total = data.counts
      this.questionList = data.items
      // console.log(this.questionList)
    },

    // 清除
    clearAll () {
      this.reQuestion = {}

      this.getQuestionList()
      this.activeName = 'all'
    },
    // 当前页码变化
    handleCurrentChange (val) {
      this.reQuestion.page = val
      this.getQuestionList()
    },
    // 每页页码变化
    handleSizeChange (val) {
      this.reQuestion.pagesize = val
      this.getQuestionList()
    },

    // province发生变化触发的事件
    onProvinceChange (val) {
      this.reQuestion.city = ''
      this.citys = citys(val)
    },

    // 获取录入人
    async getCreator () {
      try {
        // console.log(123)

        const { data } = await creator({ page: '1', pagesize: 100, keyword: '' })
        // console.log(23)

        this.creatorList = data.list
        console.log(data)
      } catch (error) {

      }
    },

    // 目录触发事件
    onCatalogChange (val) {
      // 获取标签
      this.getTagList()
    },

    // 学科选择框变化后触发事件、
    async onSubjectChange (val) {
      this.reQuestion.tags = null
      this.reQuestion.catalogID = null
      const { data } = await catalog({ subjectID: val })
      this.catalogs = data.items
      this.tagList = []
      // console.log(this.catalogs)
    },
    // 获取学科列表
    async getsubjectsList () {
      try {
        const { data } = await subject({ page: 1, pagesize: 100 })
        this.subjectsList = data.items
        // console.log(this.subjectsList)
      } catch (error) {

      }
    },
    // 获取标签列表
    async getTagList () {
      const { data } = await tag({
        subjectID: this.reQuestion.subjectID
      })
      this.tagList = data.items
    },

    // 预览试题
    async Preview (item) {
      this.showDialogPre = true
      // 显示
      const { data } = await detail({ id: item.id })
      this.questionDetail = data
      // data.questionType = item.questionType
      // data.subject = item.subject
      // 弹出框
      // 试题数据传入
    },
    // 转到试题页面去修改
    revise (row) {
      this.$router.push({
        path: './new',
        query: {
          id: row.id
        }
      })
    },
    // 上架和下架  publishState 1 上架  0下架
    async choicePublish (item, e) {
      const result = await this.$confirm('您确认' + e.target.innerText + '这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 接收下面返回的（data）结果
      let data = {}
      // 如果确认的话执行
      if (result === 'confirm') {
        switch (e.target.innerText) {
          case '上架':
            data = await choicePublish({
              id: item.id,
              publishState: 1
            })
            break
          case '下架':
            data = await choicePublish({
              id: item.id,
              publishState: 0
            })
            break
        }
        if (data.status === 200) {
          this.$message.success(e.target.innerText + '成功')
        }
        this.getQuestionList()
      }
    },
    // 删除操作
    async deleteQuestion (item) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 确认删除的话执行
      if (result === 'confirm') {
        const data = await remove(item)
        if (data.status === 200) {
          this.getQuestionList()
          return this.$message.success('删除成功')
        }
      }
    },

    // 审核试题
    checkQuestion (item) {
      this.checkQuestionDialog = true
      this.questionItem = item
    }

  }
}
</script>

<style scoped lang='scss'>
span {
  font-size: 12px;
  color: pink;
}
</style>
